<template>
  <el-dialog :title="showTitle" :visible="deptDialogVisible" @close="close">
    <el-form :model="deptForm" :rules="rules" ref="deptForm" label-width="120px" >
      <el-form-item label="部门名称" prop="name">
          <el-input v-model="deptForm.name" placeholder="2-10个字符" style="width: 80%" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code" >
          <el-input v-model="deptForm.code" placeholder="2-10个字符" style="width: 80%" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId" >
          <el-select v-model="deptForm.managerId" placeholder="请选择负责人" style="width: 80%" size="mini">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.username"
                :value="item.id">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce" >
          <el-input v-model="deptForm.introduce" type="textarea" :rows="5" placeholder="1-100个字符" style="width: 80%" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button @click="close">取 消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { getDepartment, getManagerList, addDepartment, getDepartmentDetail, updateDepartmentDetail } from '@/api/department'
import { Message } from 'element-ui'
  export default {
    name: 'AddDept',
    props: {
      deptDialogVisible: {
        type: Boolean,
        default: false
      },
      currentNodeId: {
        type: Number,
        default: null
      }
    },
    data() {
      return { 
        formVisible: false,
        options: [
          {id: '选项1',username: '黄金糕'},
          {id: '选项2',username: 'kezaijian'}
        ],
        deptForm: {
          name: '',
          code: '',
          managerId: '',
          introduce: '',
          pid: ''
        },
        rules: {
          name: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '部门名称的长度为2-10个字符', trigger: 'blur' },
            { validator: async (rule, value, callback) => {
              let deptData = await getDepartment()
              // 编辑场景下的表单数据一定会有id
              if (this.deptForm.id) {
               deptData = deptData.filter(item => item.id !== this.deptForm.id)
              }
              if (deptData.some(item => item.name === value)) {
                callback(new Error('部门中已经有该名称了'))
              } else {
                callback()
              }
            }, trigger: 'blur' }
          ],
          code: [
            { required: true, message: '部门编码不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '部门编码的长度为2-10个字符', trigger: 'blur' },
            { validator: async (rule, value, callback) => {
              let deptData = await getDepartment()
              // 编辑场景下的表单数据一定会有id
              if (this.deptForm.id) {
               deptData = deptData.filter(item => item.id !== this.deptForm.id)
              }
              if (deptData.some(item => item.code === value)) {
                callback(new Error('部门中已经有该编码了'))
              } else {
                callback()
              }
            }, trigger: 'blur' }
          ],
          managerId: [
            { required: true, message: '部门负责人不能为空', trigger: 'blur' },
          ],
          introduce: [
            { required: true, message: '部门介绍不能为空', trigger: 'blur' },
            { min: 1, max: 100, message: '部门介绍的长度为1-100个字符', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      showTitle() {
        return this.deptForm.id ? '编辑部门' : '新增部门'
      }
    },
    methods: {
      close() {
        this.$refs.deptForm.resetFields()
        this.deptForm = {
          name: '',
          code: '',
          managerId: '',
          introduce: '',
          pid: ''
        }
        this.$emit('update:deptDialogVisible', false)
      },
      confirm() {
        this.$refs.deptForm.validate(async valid => {
          if (valid) {
            // 把收集到的数据中的pid修改为用户点击后传进来的当前节点id
            // this.deptForm.pid = this.currentNodeId
            // await addDepartment(this.deptForm)
            let msg = '新增'
            if (this.deptForm.id) {
              // 调用修改部门详情的请求接口
              // 有id就是编辑部门的场景，里面获取过来的数据本身包含pid
              msg = '编辑'
              await updateDepartmentDetail(this.deptForm)
            } else {
              // 调用新增部门详情的请求接口   (可以使用下面的简化写法，后面的pid属性会覆盖前面的pid属性)
              // 没有id就是添加部门的场景，需要根据父组件传递过来的属性currentNodeId当前节点的id，赋值给pid
              await addDepartment({...this.deptForm, pid: this.currentNodeId})
            }
            // 通知父组件更新列表  (即：重新发送请求获取部门列表数据，重新渲染页面)
            this.$emit('updateDepartment')
            // 重置表单，关闭弹层
            this.close()
            // 发送成功消息
            this.$message({type: 'success', message: `${msg}部门成功`})
          }
        })
      },
      async getManagerList() {
        this.options = await getManagerList()
      },
      async getDepartmentDetail() {
       this.deptForm = await getDepartmentDetail(this.currentNodeId)
      }
    },
    created() {
     this.getManagerList()
    }
  }
</script>

<style>
</style>